<template>
  <!--  抗菌药物统计-->
  <div class="wrapper">
    <div class="left">
      <Card>
        <div slot="cardHeader">统计列表</div>
        <div slot="cardBody"> <el-tree
          :data="statisticalListData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        /></div>
      </Card>
    </div>
    <div class="right">
      <Card>
        <div slot="cardHeader">{{ cardTitle }}</div>
        <div slot="cardBody"> <div>
          <report-form :is-show="isShow" father="dcCenter" />
          <select-buttons @btnClick="btnClick" />
        </div></div>
      </Card>
    </div>
    <el-dialog
      :title="cardTitle"
      :visible.sync="dialogTableVisible"
    >
      {{ this.gridData }}
    </el-dialog>
  </div>
</template>

<script>
import SelectButtons from './SelectButtons'
import ReportForm from './ReportForm'
import Card from '../../childComps/card/Card'
export default {
  name: 'MainConter',
  components: {
    SelectButtons,
    ReportForm,
    Card
  },
  data() {
    return {
      //  显示哪些组件
      isShow: {
        self: true, sj: true, jzlx: true, dpjg: true,
        dpr: true, cfks: true
      },
      selectTree: {},
      cardTitle: '筛选信息',
      defaultProps: {
        label: 'label'
      },
      statisticalListData: [
        { label: '门（急）诊处方指标', listId: 'list1' },
        { label: '门（急）诊病人指标', listId: 'list2' },
        { label: '住（出）院病人指标', listId: 'list3' },
        { label: '抗菌药物使用强度', listId: 'list4' },
        { label: '抗菌药物使用强度', listId: 'list5' },
        { label: '抗菌药物使用强度', listId: 'list6' },
        { label: '抗菌药物使用强度', listId: 'list7' }
      ],
      gridData: '后台获取数据，进行打印保存等操作',
      dialogTableVisible: false
    }
  },
  methods: {
    // 传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
    handleNodeClick(data) {
      const { label, listId } = data
      this.selectTree = { label, listId }
      console.log(this.selectTree)
      this.cardTitle = label
      this.$message({
        message: '从后台获取动态内容',
        type: 'success'
      })
    },
    btnClick() {
      this.dialogTableVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
  .wrapper{
    margin-left: 20px;
    margin-top: 20px;
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    .left{
      flex: 1;
      padding-right: 20px;
      padding-bottom: 20px;
    }
    .right{
      padding-right: 20px;
      min-width: 540px;
      flex: 1;
    }
  }

</style>
